import type { FC } from 'react';
import styles from './index.module.css';
import Chat, {
  Bubble,
  Card,
  CardMedia,
  CardTitle,
  useMessages
} from '@chatui/core';
import { TestComponent } from './components/test';

const initialMessages = [
  {
    type: 'system',
    content: { text: '88VIP专属智能客服小蜜 为您服务' }
  },
  {
    type: 'text',
    content: { text: 'Hi，我是你的专属智能助理小蜜，有问题请随时找我哦~' },
    user: {
      avatar:
        'https://gw.alicdn.com/imgextra/i2/O1CN01fPEB9P1ylYWgaDuVR_!!6000000006619-0-tps-132-132.jpg'
    }
  }
];

// 默认快捷短语，可选
const defaultQuickReplies = [
  {
    icon: 'message',
    name: '联系人工服务',
    isNew: true,
    isHighlight: true
  },
  {
    name: '短语1',
    isNew: true
  },
  {
    name: '短语2',
    isHighlight: true
  },
  {
    name: '短语3'
  }
];

export const HomeView: FC = () => {
  // 消息列表
  const { messages, appendMsg } = useMessages(initialMessages);

  // 发送回调
  function handleSend(type: any, val: any) {
    if (type === 'text' && val.trim()) {
      appendMsg({
        type: 'text',
        content: { text: val },
        position: 'right'
      });

      // TODO: 发送请求
      // 模拟回复消息
      setTimeout(() => {
        // appendMsg({
        //   type: 'text',
        //   content: { text: '亲，您遇到什么问题啦？请简要描述您的问题~' }
        // });

        appendMsg({
          type: 'dom',
          content: (
            <TestComponent leftSlot={'leftSlot'} rightSlot="right slot">
              Commodo cillum et minim nostrud nisi non anim magna ex laboris
            </TestComponent>
          )
          // content: { text: '亲，您遇到什么问题啦？请简要描述您的问题~' },
          // position: 'pop'
        });
      }, 1000);
    }
  }

  // 快捷短语回调，可根据 item 数据做出不同的操作，这里以发送文本消息为例
  function handleQuickReplyClick(item: any) {
    handleSend('text', item.name);
  }

  function renderMessageContent(msg: any) {
    const { type, content } = msg;

    console.log(1111, type, content);
    // 根据消息类型来渲染
    switch (type) {
      case 'text':
        return <Bubble content={content.text} />;
      case 'dom':
        return content
        // return <Bubble content={content.text} />;
        return (
          <Card fluid>
            <CardMedia
              aspectRatio="wide"
              image="//gw.alicdn.com/tfs/TB1pLWVTAT2gK0jSZFkXXcIQFXa-620-320.jpg"
            />
            <CardTitle title="我是标题"></CardTitle>
          </Card>
        );

      case 'image':
        return (
          <Bubble type="image">
            <img src={content.picUrl} alt="" />
          </Bubble>
        );
      default:
        return null;
    }
  }

  return (
    <div className={styles['page']}>
      <Chat
        navbar={{ title: '智能助理' }}
        messages={messages}
        renderMessageContent={renderMessageContent} // 自定义消息内容渲染
        quickReplies={defaultQuickReplies}
        onQuickReplyClick={handleQuickReplyClick}
        onSend={handleSend}
      />
    </div>
  );
};
